<template>
    <div class="box">
        <Echarts class="echarts" :options="options" />
        <div class="info">{{ reciveData.label }}</div>
    </div>
</template>

<script>
import Echarts from "./index";
export default {
    components: {
        Echarts,
    },
    props: {
        reciveData: {
            // type: Array,
        },
    },
    computed: {
        options() {
            return {
                title: {
                    text: this.reciveData.normal,
                    top: "20%",
                    textAlign: "center",
                    left: "45%",
                    textStyle: {
                        color: "#fff",
                        fontSize: 25,
                        fontWeight: "400",
                    },
                },
                series: [
                    {
                        name: "空",
                        type: "pie",
                        startAngle: 180, //起始角度
                        // endAngle:180,
                        radius: ["70%", "85%"],
                        center: ["50%", "38%"],
                        avoidLabelOverlap: false,
                        // hoverAnimation: false,
                        emphasis: {
                            scale: false,
                        },
                        label: {
                            show: false,
                            position: "center",
                        },

                        data: [
                            {
                                value: this.reciveData.normal,
                                name: "正常",
                                itemStyle: {
                                    borderRadius: 5,
                                    color: {
                                        type: "linear",
                                        x: 0,
                                        y: 1,
                                        x2: 0,
                                        y2: 0,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: "#06E7FE",
                                            },
                                            {
                                                offset: 1,
                                                color: "#026CF2",
                                            },
                                        ],
                                    },
                                },
                            },
                            {
                                value: this.reciveData.fault,
                                name: "错误",
                                itemStyle: {
                                    borderRadius: 5,
                                    color: {
                                        type: "linear",
                                        x: 0,
                                        y: 1,
                                        x2: 0,
                                        y2: 0,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: "#FF665A",
                                            },
                                            {
                                                offset: 1,
                                                color: "#FF965A",
                                            },
                                        ],
                                    },
                                },
                            },
                            {
                                value: this.reciveData.normal + this.reciveData.fault,
                                name: "",
                                itemStyle: { color: "rgba(0,0,0,0)" },
                            },
                        ],
                    },
                ],
            };
        },
    },
};
</script>

<style lang="scss" scoped>
.box {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    // border: 1px solid red;
    .echarts {
        width: 100%;
        height: 100% + 100%;
    }
    .info {
        position: absolute;
        top: calc(100% - 15px);
        width: 100%;
        height: 12px;
        // border: 1px solid red;
        font-size: 12px;
        font-family: SourceHanSansCN-Medium, SourceHanSansCN;
        font-weight: 500;
        color: #ffffff;
        line-height: 12px;
        text-align: center;
    }
}
</style>
